<template>
  <view class="container">
    <!-- 卡片显示预约入园时间和选中的日期 -->
      <view class="cardview">
        <uni-card>
          <uni-row>
            <uni-col :span="5">
              <!-- 目标文字显示用户选择的日期和时间 -->
              <image src="../../static/bianzu.png" class="icon" />
            </uni-col>
            <uni-col :span="19">
              <!-- 你可以在这里放置其他内容，如按钮等 -->
    		  <view class="card-texts">
    		  <text class="target">预约入园时间:</text><br>
    		  <text class="target">{{ selectedDate }} {{ selectedTime }}</text>
    		  </view>
            </uni-col>
          </uni-row>
        </uni-card>
    </view>


    <!-- 预约信息 -->

    <view class="form-section">
      <view class="form-title">预约信息</view>
      <view class="form-item">
        <text class="form-label">团体名称</text>
        <text style="color: red;">*</text>
        <text class="form-label">:</text>
        <input type="text" placeholder="团体名称" v-model="mainUser.name1" class="form-input"/>
      </view>
      <!-- 团队人数选择器 -->
      <view class="form-item">
        <uni-section>
          <text class="form-label">团队人数</text>
          <text style="color: red;">*</text>
          <text class="form-label">:</text>
          <uni-data-select
              v-model="select"
              :localdata="options"
          ></uni-data-select>
        </uni-section>
      </view>
    </view>


    <!--团体负责人1信息 -->
    <view class="form-section">
      <view class="form-title">团体负责人1</view>
      <view class="form-item">
        <text class="form-label">姓名</text>
        <text style="color: red;">*</text>
        <text class="form-label">:</text>
        <input type="text" placeholder="请输入同行人姓名" v-model="mainUser.name" class="form-input"/>
      </view>
      <view class="form-item">
        <uni-section>
          <text class="form-label">证件类型</text>
          <text style="color: red;">*</text>
          <text class="form-label">:</text>
          <uni-data-select
              v-model="mainUser.Value"
              :localdata="range"
              @change="change"
          ></uni-data-select>
        </uni-section>
      </view>
      <view class="form-item">
        <text class="form-label">证件号码</text>
        <text style="color: red;">*</text>
        <text class="form-label">:</text>
        <input type="text" placeholder="请输入证件号码" v-model="mainUser.idNumber" class="form-input"/>
      </view>
      <view class="form-item">
        <text class="form-label">手机号码</text>
        <text style="color: red;">*</text>
        <text class="form-label">:</text>
        <input type="text" placeholder="请输入手机号" v-model="mainUser.phoneNumber" class="form-input"/>
      </view>
    </view>

    <!--团体负责人信息 -->
	<view v-for="(companion, index) in companions" :key="index" class="form-section">
		<uni-row>
			<uni-col span="6">
				<view class="form-title">团体负责人{{ index + 1 }}</view>
			</uni-col>
			<uni-col span="3" offset="15">
				<icon @click="removeCompanion(index)" type="clear"></icon>
			</uni-col>
		</uni-row>


      <view class="form-item">
        <text class="form-label">姓名</text>
        <text style="color: red;">*</text>
        <text class="form-label">:</text>
        <input type="text" placeholder="请输入同行人姓名" v-model="companion.name" class="form-input"/>
      </view>
      <view class="form-item">
        <uni-section>
          <text class="form-label">证件类型</text>
          <text style="color: red;">*</text>
          <text class="form-label">:</text>
          <uni-data-select
              v-model="companions.Value"
              :localdata="idTypes"
              @change="Change"
          ></uni-data-select>
        </uni-section>
      </view>

      <view class="form-item">
        <text class="form-label">证件号码</text>
        <text style="color: red;">*</text>
        <text class="form-label">:</text>

        <input type="text" placeholder="请输入证件号码" v-model="companion.idNumber" class="form-input"/>
      </view>
      <view class="form-item">
        <text class="form-label">手机号码</text>
        <text style="color: red;">*</text>
        <text class="form-label">:</text>
        <input type="text" placeholder="请输入手机号" v-model="companion.phoneNumber" class="form-input"/>
      </view>

    </view>

    <!-- 添加同行人按钮 -->
    <button class="add-companion" @click="addCompanion">
      <text class="add-companion-text">添加同行人</text>
    </button>

    <!--提示信息-->
    <view class="note">
      <text>最多预约成人4人，儿童3人</text>
    </view>


    <!-- 提交按钮 -->
    <button class="submit-button" @click="submitReservation">
      <text class="button-text">提交预约</text>
    </button>

  </view>
</template>

<script>
export default {
  data() {
    return {
      select: 1,
      options: [
        {value: 1, text: "1人"},
        {value: 2, text: "2人"},
        {value: 3, text: "3人"},
        {value: 4, text: "4人"},
        {value: 5, text: "5人"},
        {value: 6, text: "6人"},
        {value: 7, text: "7人"},
      ],
      value: 0,
      range: [
        {value: 0, text: "中国居民身份证"},
        {value: 1, text: "护照"},
        {value: 2, text: "其他"},
      ],
      companions: [],
      companionValue: 0,
      idTypes: [
        {companionValue: 0, text: "中国居民身份证"},
        {companionValue: 1, text: "护照"},
        {companionValue: 2, text: "其他"},
      ],
      mainUser: {
        name: '',
        idType: 0, // 默认选中第一个证件类型
        idNumber: '',
        phoneNumber: ''
      },
      selectedDate: '',  // 存储传递的日期
      selectedTime: ''   // 存储传递的时间
    };
  },
  methods: {
    change() {
      console.log(this.select)
    },
    goBack() {
      uni.navigateBack();
    },
    addCompanion() {
      if (this.companions.length <this.select-1) {
        this.companions.push({
          name: '',
          idType: 0,
          idNumber: '',
          phoneNumber: ''
        });
      } else {
        uni.showToast({
          title: '最多添加'+this.select+'人',
          icon: 'none'
        });
      }
    },
    removeCompanion(index) {
      this.companions.splice(index, 1);
    },
    submitReservation() {
      if (this.mainUser.name && this.mainUser.idNumber && this.mainUser.phoneNumber) {
        uni.showToast({
          title: '预约提交成功！',
          icon: 'success',
          duration: 500, // 设置显示时长为0.5秒
          success: () => {
            // 跳转到 success.vue 页面
            setTimeout(() => {
              console.log(this.mainUser.name)
              console.log(this.mainUser.idNumber)
              console.log(this.mainUser.Value)
              console.log(this.mainUser.phoneNumber)
              console.log(this.select)
              uni.navigateTo({
                url: `/pages/success/success?name=${this.mainUser.name}&&idNumber=${this.mainUser.idNumber}&&Value=${this.mainUser.Value}&&phoneNumber=${this.mainUser.phoneNumber}&&selectedValue=${this.select}&&teamname=${this.mainUser.name1}&&selectedDate=${this.selectedDate}&&selectedTime=${this.selectedTime}`  // success.vue 对应的路径
              });
            }, 2000); // 等待 toast 显示完再跳转
          }
        });
      } else {
        uni.showToast({
          title: '请填写完整的预约信息',
          icon: 'none'
        });
      }
    }
  },
  onLoad(options) {
    // 获取从其他页面传递过来的日期和时间参数
    this.selectedDate = options.selectedDate || '';
    this.selectedTime = options.selectedTime || '';
  }
};
</script>


<style scoped>
.container {
  padding: 20px;
  background-color: #f9f9f9;
}

.nav-bar {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 20px;
  color: #000;
}

.icon {
  height: 38px;
  width: 38px;
}

.form-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #FFFFFF;
  border-radius: 12px;
}

.form-title {
  width: 84px;
  height: 21px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
}

.form-item {
  margin-bottom: 15px;
}

.form-label {
  color: #05261b;
  font-size: 15px;
  font-face: PingFangSC;
  font-weight: 400;
  line-height: 0;
  letter-spacing: 0;
  paragraph-spacing: 0;
  text-align: left;
}

.form-input {
  flex: 1;
  padding: 8px;
  border-radius: 12px;
  background: #F3F5F9;
  margin-top: 6px;
  margin-bottom: 14px;

}

.form-description {
  margin-left: 10px;
  font-size: 14px;
  color: #555;
}

.add-companion{
  width: 351px;
  background: #FFFFFF;
  border: 1px solid #8DCB6D;
  margin-top: 14px;
  text-align: center;
  vertical-align: center;
  height: 45px;
  border-radius: 25px;
  gap: 40px;
}

.add-companion-text{
  width: 75px;
  height: 21px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 15px;
  color: #323232;
  letter-spacing: 0;
}

.submit-button{
  margin-top: 26px;
  text-align: center;
  vertical-align: center;
  width: 351px;
  height: 45px;
  background: #8DCB6D;
  border-radius: 25px;
  gap: 40px;

}

.button-text{
  width: 68px;
  height: 24px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 17px;
  color: #FFFFFF;
  letter-spacing: 0;
}

.delete-button {
  width: 16px;
  height: 16px;
  opacity: 100;
  background: #FF6347;
}



/*时间组件涉及 .container .cardview .target .time**/
.container {
  padding: 20px;
}

.cardview {
  margin-top: 20px;
}

.target {
  width: 72px;
  height: 17px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #000000;
  letter-spacing: 0;
}

.time{
  width: 212px;
  height: 21px;
  font-family: PingFangSC-SNaNpxibold;
  font-weight: 600;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
}

.note{
  width: 159px;
  opacity: 0.75;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #323232;
  letter-spacing: 0;
  margin-top: 11px;
  margin-left: 34px;
}

</style>